<template>
	<view>
		<u-navbar style="position: fixed;" border-bottom="false"  background="rgba(0,0,0,0)" is-fixed="true" z-index="999" title=" "></u-navbar>
		<view style="width: 300px;height: 300px;overflow: hidden;border-radius: 8px;margin:100px auto;position: relative;">
			<image :src="bg[0].avatar_image" style="width: 100%;" mode="widthFix"></image>
			<view @click="show=true" style="position: absolute;z-index: 1;width: 100%;line-height: 36px;text-align: left;color: #fff;top: 140px;left: 30px; font-size: 180rpx;font-family: font-art">
				{{text}}
				<!-- <text> {{text}}</text> -->
			</view>
			<!-- <view style="position: absolute;z-index: 1;width: 100%;line-height: 36px;text-align: center;color: #fff;bottom: 20px;left: 0;">
				<image :src="emoimg.icon_image" style="width: 30px;" mode="widthFix"></image>
			</view> -->
		</view>
		<view class="flex a-t" style="box-sizing: border-box;padding: 0 20px;margin-top: 10px;">
			<view @click="left(1)">
				<u-icon name="arrow-left"></u-icon>
			</view>
			<view style="width:280px;margin: auto;overflow: hidden;">
				<view class="flex a-t" :style="{'width':width+'px'}">
					<view :class="index==0?'list1':''" v-for="(item,index) in bg" class="list" style="overflow: hidden;float: left;margin-right: 10px;position: relative;">
						<view @click="jiesuo(item)" v-if="item.lock_switch==1&&item.unlocked_count==0" class="mb" style="position: absolute;width: 100%;height: 100%;background: rgab(0,0,0,0.4);color: #fff;font-size: 12px;top: 0;left: 0;text-align: center;">
							点击解锁
						</view>
						<image :src="item.avatar_image" style="width:100%;" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view @click="left(2)">
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<!-- <view class="flex a-t" style="width: 300px;margin: auto;padding: 10px 0;">
			<image @click="emo(item)" v-for="(item,index) in emolist" :src="item.icon_image" style="width: 30px;" mode="widthFix"></image>
		</view> -->
		<u-popup v-model="show" mode="center">
				<view style="width: 280px;padding: 20px;">
					<view>
						<u-input v-model="content" value="" :type="type" :border="border" :height="height" :auto-height="autoHeight" />
					</view>
					<view>
						<view @click="queding" class="button f14" style="width: 120px; text-align: center; line-height: 40px;margin: auto;">
							确定
						</view>
					</view>
				</view>
		</u-popup>
		<view @click="submit" class="button f14" style="width: 120px; text-align: center; line-height: 40px;position: fixed; z-index: 1;bottom: 50px; left: 50%; margin-left: -60px; ">
			确认保存
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				// value:'',
				type: 'textarea',
				border: true,
				height: 100,
				autoHeight: true,
				show:false,
				list:[],
				emoimg:{},
				text:'苏',
				bg:[],
				bgimg:'',
				width:0,
				emolist:[],
				content:'',
				form:{},
			}
		},
		onLoad(e) {
			/*uni.loadFontFace({
			  family: 'b123',
			  // source: 'url("https://yunkeososyunchuc.bc8t.cn/lianaikongjian/1/u27fog.ttf")',
			  source: 'url("https://sungd.github.io/Pacifico.ttf")',
			  success(e) {
			      console.log(e,'success')
			  }
			})*/

            // #ifdef MP-WEIXIN
            uni.loadFontFace({
                family: 'font-art',
                source: `url("${this.$u.http.config.baseUrl+ '/static/iconfont/artnew.ttf'}")`,
            })
            // #endif

            uni.setNavigationBarColor({
			    frontColor: '#000000',
			    backgroundColor: '#ffffff',
			})
			if(e.item){
				this.form=JSON.parse(e.item)
				this.text=JSON.parse(e.item).content
				this.emoimg.icon_image=JSON.parse(e.item).emoji
				this.type=1
			}
			// for(let i=100; i<120;i++){
			// 	let img='https://yunkeososyunchuc.bc8t.cn/lianaikongjian/static/emoji/'+i+'.gif'
			// 	this.list.push(img)
			// }
			this.ribg()
			this.emoji()

		},
		methods: {
			//提交
			async submit(){
                if(!this.vuex_user_content.id){
                    uni.showToast({
                        title: '获取空间信息失败，请重新进入',
                        icon: 'none'
                    });
                    setTimeout(function () {
                        uni.switchTab({
                            url:'/pages/content/content'
                        })
                    }, 1500);
                    return false;
                }

				let data={
					my_space_id:this.vuex_user_content.id,
					diary_id:this.bg[0].id,
					content:this.text,
					emoji:this.emoimg.icon_image
				}
				var name=''
				if(this.type==1){
					data.record_id=this.form.id
					name ='编辑成功'
				}else{
					name = '提交成功'
				}
				let res =await this.$u.api.write(data)
				uni.showToast({
					title:name,
					icon:'none'
				})
                setTimeout(function () {
                    uni.switchTab({
                        url:'/pages/content/content'
                    })
                }, 1500);
			},

			// 表情
			async emoji(){
				let res =await this.$u.api.emoji()
				this.emolist=res
				this.emoimg=res[res.length-1]
			},
			async jiesuo(e){
				let data={
					my_space_id:this.vuex_user_content.id,
					diary_id:e.id

				}
				let res = await this.$u.api.unlock(data)
				e.unlocked_count=1
				// this.ribg()
			},
			left(e){
				if(e==1){
					let i1=this.bg[0]
					this.bg.splice(0,1)
					this.bg.push(i1)
				}else{
					let i2=this.bg[this.bg.length-1]
					this.bg.splice(this.bg.length-1,1)
					this.bg.unshift(i2)
				}
			},
			async ribg(){
				let res = await this.$u.apis.new_year_avatar()
				this.bg=res
				this.width=(res.length-1)*90+110
				this.bgimg=res[0].avatar_image
			},
			emo(e){
				this.emoimg=e
			},
			queding(){
				if(!this.content){
					return uni.showToast({
						title:'请输入文字',
						icon:"none"
					})
				}
				this.text=this.content
				this.show=false
			},
		}
	}
</script>

<style>
	page {
		height: 100%;
		/* background: image('https://yunkeososyunchuc.bc8t.cn/lianaikongjian/xinniantoux/toux.jpg') 100% 100% no-repeat; */
		background-image: url('https://yunkeososyunchuc.bc8t.cn/lianaikongjian/xinniantoux/toux.jpg');
		background-size: 100% 100%;
		overflow: hidden;
	}

	.list {
		width: 80px;
		height: 80px;
		line-height: 80px;
	}

	.list .mb {
		line-height: 80px;
	}

	.list1 {
		width: 100px;
		height: 100px;
		line-height: 100px;
	}

	.list1 .mb {
		line-height: 100px;
	}

	.text-cn {
		font-family: 'b123', Courier, monospace;
	}
</style>
